{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>订单管理</title>
    <meta name="description" content="Responsive, Bootstrap, BS4">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
    <link rel="apple-touch-icon" href="{% static '' %}aside/images/logo.png">
    <meta name="apple-mobile-web-app-title" content="Flatkit">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" sizes="196x196" href="{% static '' %}aside/images/logo.png">
    <link rel="stylesheet" href="{% static '' %}aside/css/animate.css/animate.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/glyphicons/glyphicons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/font-awesome/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/material-design-icons/material-design-icons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/ionicons/css/ionicons.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/simple-line-icons/css/simple-line-icons.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/bootstrap/dist/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="{% static '' %}aside/css/styles/app.min.css">
    <link rel="stylesheet" href="{% static '' %}aside/css/styles/font.css" type="text/css">
</head>
<body>
<div class="app" id="app">
<div id="aside" class="app-aside fade nav-dropdown black">
    <div class="navside dk" data-layout="column">
        <div class="navbar no-radius"><a href="{% url 'erp:demo' %}" class="navbar-brand">
            <div data-ui-include="'{% static '' %}aside/images/logo.svg'"></div>
            <img src="{% static '' %}aside/images/logo.png" alt="." class="hide"> <span class="hidden-folded inline">aside</span></a></div>
        <div data-flex class="hide-scroll">
            <nav class="scroll nav-stacked nav-stacked-rounded nav-color">
                <ul class="nav" data-ui-nav>
                    <li class="nav-header hidden-folded m-t"><span class="text-xs">订单管理</span></li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-plus-circled"></i></span> <span class="nav-text">人工预处理</span></a>
                        <ul class="nav-sub nav-mega nav-mega-3">
                            <li><a href="#"><span class="nav-text">有留言订单</span></a></li>
                            <li><a href="#"><span class="nav-text">无对应SKU</span></a></li>
                            <li><a href="#"><span class="nav-text">报关信息不全</span></a></li>
                            <li><a href="#"><span class="nav-text">收货信息不全</span></a></li>
                            <li><a href="#"><span class="nav-text">可合并订单</span></a></li>
                        </ul>
                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-ios-photos"></i></span> <span class="nav-text">确定单号</span></a>
                        <ul class="nav-sub nav-mega">
                            <li><a href="#"><span class="nav-text">申请单号</span></a></li>

                        </ul>
                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-checkmark-circled"></i></span> <span class="nav-text">确定物流</span></a>
                        <ul class="nav-sub">
                            <li><a href="#"><span class="nav-text">选择物流</span></a></li>

                        </ul>
                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-ios-grid-view"></i></span> <span class="nav-text">等待打单</span></a>
                        <ul class="nav-sub">
                            <li><a href="#"><span class="nav-text">待打单(有货)</span></a></li>
                            <li><a href="#"><span class="nav-text">待打单(缺货)</span></a></li>
                        </ul>
                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-pie-graph"></i></span> <span class="nav-text">已发货</span></a>

                    </li>
                    <li><a><span class="nav-caret"><i class="fa fa-caret-down"></i></span> <span class="nav-icon"><i class="ion-information-circled"></i></span> <span class="nav-text">异常订单</span></a>
                        <ul class="nav-sub">
                            <li><a href="#"><span class="nav-text">已搁置</span></a></li>
                            <li><a href="#"><span class="nav-text">退款</span></a></li>
                            <li><a href="#"><span class="nav-text">重新发包裹</span></a></li>
                            <li><a href="#"><span class="nav-text">换面单</span></a></li>
                        </ul>
                    </li>
                    <li class="nav-header hidden-folded"><span class="text-xs">主菜单</span></li>
                    <li><a href="#" class="b-danger"><span class="nav-icon text-white no-fade"><i class="ion-filing"></i></span> <span class="nav-text">个人中心</span></a></li>
                    <li><a href="{% url 'erp:order' %}" class="b-accent"><span class="nav-icon text-white no-fade"><i class="ion-android-apps"></i></span> <span class="nav-text">订单管理</span></a></li>
                    <li><a href="#" class="b-success"><span class="nav-icon text-white no-fade"><i class="ion-android-apps"></i></span> <span class="nav-text">产品管理</span></a></li>
                    <li><a href="{% url 'erp:message' %}" class="b-info"><span class="nav-label"><b class="label label-xs rounded danger"></b></span> <span class="nav-icon"><i class="ion-chatbubble-working"></i></span> <span class="nav-text">消息处理</span></a></li>
                    <li><a href="#" class="b-default"><span class="nav-icon"><i class="ion-person"></i></span> <span class="nav-text">客户管理</span></a></li>

                </ul>
            </nav>
        </div>
        <div data-flex-no-shrink>
            <div class="nav-fold dropup"><a data-toggle="dropdown">
                <div class="pull-left">
                    <div class="inline"><span class="avatar w-40 grey">JR</span></div>
                    <img src="{% static '' %}aside/images/a0.jpg" alt="..." class="w-40 img-circle hide"></div>
                <div class="clear hidden-folded p-x"><span class="block _500 text-muted">Jean Reyes</span>
                    <div class="progress-xxs m-y-sm lt progress">
                        <div class="progress-bar info" style="width: 15%"></div>
                    </div>
                </div>
            </a>
                <div class="dropdown-menu w dropdown-menu-scale"><a class="dropdown-item" href="#"><span>个人资料</span></a> <a class="dropdown-item" href="#"><span>设置</span></a> <a class="dropdown-item" href="#"><span>收件箱</span></a> <a class="dropdown-item" href="#"><span>消息处理</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">帮助?</a> <a class="dropdown-item" href="#">退出</a></div>
            </div>
        </div>
    </div>
</div>
<div id="content" class="app-content box-shadow-z2 bg pjax-container" role="main">
<div class="app-header white bg b-b">
    <div class="navbar" data-pjax><a data-toggle="modal" data-target="#aside" class="navbar-item pull-left hidden-lg-up p-r m-a-0"><i class="ion-navicon"></i></a>
        <div class="navbar-item pull-left h5" id="pageTitle">订单管理</div>

        <ul class="nav navbar-nav pull-right">
            <li class="nav-item dropdown pos-stc-xs"><a class="nav-link clear" data-toggle="dropdown"><i class="ion-android-notifications-none w-24"></i> <span class="label up p-a-0 danger"></span></a>
                <div class="dropdown-menu pull-right w-xl animated fadeIn no-bg no-border no-shadow">
                    <div class="scrollable" style="max-height: 220px">
                        <ul class="list-group list-group-gap m-a-0">
                            <li class="list-group-item dark-white box-shadow-z0 b"><span class="pull-left m-r"><img src="{% static '' %}aside/images/a0.jpg" alt="..." class="w-40 img-circle"></span> <span class="clear block">新增订单［<a href="#" class="text-primary">78023645468911</a>］<br>
                    <small class="text-muted">10 分钟前</small></span></li>
                            <li class="list-group-item dark-white box-shadow-z0 b"><span class="pull-left m-r"><img src="{% static '' %}aside/images/a1.jpg" alt="..." class="w-40 img-circle"></span> <span class="clear block">产品SKU［32601740388］<a href="#" class="text-primary">缺货</a><br>
                    <small class="text-muted">2 小时前</small></span></li>
                            <li class="list-group-item dark-white text-color box-shadow-z0 b"><span class="pull-left m-r"><img src="{% static '' %}aside/images/a2.jpg" alt="..." class="w-40 img-circle"></span> <span class="clear block">订单［78023645468911］ 有<a href="#" class="text-primary">留言</a><br>
                    <small class="text-muted">1 天前</small></span></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="nav-item dropdown"><a class="nav-link clear" data-toggle="dropdown"><span class="avatar w-32"><img src="{% static '' %}aside/images/a3.jpg" class="w-full rounded" alt="..."></span></a>
                <div class="dropdown-menu w dropdown-menu-scale pull-right"><a class="dropdown-item" href="#"><span>个人档案</span></a> <a class="dropdown-item" href="#"><span>设置</span></a> <a class="dropdown-item" href="#"><span>收件箱</span></a> <a class="dropdown-item" href="#"><span>消息</span></a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">帮助?</a> <a class="dropdown-item" href="#">退出</a></div>
            </li>
        </ul>
    </div>
</div>
<div class="app-footer white bg p-a b-t" style="position: fixed;">
    <div class="row" id="goodsInfoBox" style="display: none;">
        <a class="pull-right text-muted text-lg p-a-sm m-r-sm" id="closeGoodsInfoBox">×</a>
        <div class="col-sm-12">

            <div class="b-b b-success nav-active-success">
                <ul class="nav nav-tabs">
                    <li class="nav-item"><a class="nav-link active" href="#" data-toggle="tab" data-target="#tab-goods" aria-expanded="false">商品信息</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-stock" aria-expanded="false">库存信息</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-address" aria-expanded="true">收货地址</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-message" aria-expanded="true">买家留言</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-logistics" aria-expanded="true">物流信息</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-pay" aria-expanded="true">付款信息</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-profit" aria-expanded="true">订单利润</a></li>
                    <li class="nav-item"><a class="nav-link" href="#" data-toggle="tab" data-target="#tab-memo" aria-expanded="true">备注信息</a></li>
                </ul>
            </div>
            <div class="tab-content p-a m-b-md">
                <div class="tab-pane animated fadeIn text-muted active" id="tab-goods" aria-expanded="false">
                    <div class="table-responsive">
                    <table class="table table-bordered m-a-0">
                <thead>
                <tr>
                    <th>#</th>
                    <th>主图</th>
                    <th>报关信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>利润</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td><img src="http://g02.a.alicdn.com/kf/UT8tE2bXGJXXXagOFbXA.jpg_50x50.jpg" alt="星球大战光剑" class="w-48 img-responsive"/></td>
                    <td>玩具手表 / Toy Watch / $5.0 / 120（g） / </td>
                    <td>$25.89</td>
                    <td>1</td>
                    <td>$25.89</td>
                    <td>￥35</td>
                </tr>
                </tbody>
            </table>
                    </div>
                </div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-stock" aria-expanded="false">
                    <div class="table-responsive">
                    <table class="table table-bordered m-a-0">
                <thead>
                <tr>
                    <th>#</th>
                    <th>主图</th>
                    <th>SKU名称</th>
                    <th>仓库</th>
                    <th>进价</th>
                    <th>售价</th>
                    <th>利润</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td><img src="http://g02.a.alicdn.com/kf/UT8tE2bXGJXXXagOFbXA.jpg_50x50.jpg" alt="星球大战光剑" class="w-48 img-responsive"/></td>
                    <td>星球大战光剑</td>
                    <td>上海仓</td>
                    <td>￥20</td>
                    <td>$25.89</td>
                    <td>￥35</td>
                </tr>
                </tbody>
            </table>
                    </div>
                </div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-address" aria-expanded="true">
                    <div class="table-responsive">
                    <table class="table table-bordered m-a-0">
                <thead>
                <tr>
                    <th>收件人</th>
                    <th>国家</th>
                    <th>城市</th>
                    <th>地址</th>
                    <th>邮编</th>
                    <th>电话</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Rosa Maria Fiori Ferrer</td>
                    <td>SPAIN（西班牙</td>
                    <td>Badalona</td>
                    <td>avda/Marques de Mont-roig 132 piso 1 puerta 1</td>
                    <td>08918</td>
                    <td>669489517</td>
                </tr>
                </tbody>
            </table>
                    </div>
                </div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-message" aria-expanded="true">无</div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-logistics" aria-expanded="true">速卖通线上发货-中外运-西邮经济小包--上海仓</div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-pay" aria-expanded="true">
                    <div class="table-responsive">
                    <table class="table table-bordered m-a-0">
                <thead>
                <tr>
                    <th>下单时间</th>
                    <th>付款时间</th>
                    <th>剩余发货时间</th>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>2016-11-20 16:12</td>
                    <td>2016-11-22 23:55</td>
                    <td>剩余发货：4天17小时16</td>
                </tr>
                </tbody>
            </table>
                    </div>
                </div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-profit" aria-expanded="true">计算中...</div>
                <div class="tab-pane animated fadeIn text-muted" id="tab-memo" aria-expanded="true">订单备注</div>
            </div>
        </div>
    </div>


    <div class="pull-right text-sm text-muted"><a href="#" class="btn btn-icon btn-social rounded btn-social-colored red-600" id="showGoodsInfoBox" data-toggle="tooltip" data-placement="left" title="显示/隐藏订单商品信息面板"><i class="fa fa-instagram"></i> <i class="fa fa-instagram"></i></a></div>
    <span class="text-sm text-muted">WanFeng &copy; Copyright. Version 4.0.1</span>
</div>

<div class="app-body" style="padding-bottom: 8.125rem;">

<div class="padding">
<div class="box">


<div class="row p-a">
    <div class="col-sm-12 m-t-1">
        订单时间：
        <span class="label orange m-r-1 setDate" data-val="0"><a href="javascript:">全部</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="1"><a href="javascript:">今天</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="2"><a href="javascript:">昨天</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="3"><a href="javascript:">近7天</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="4"><a href="javascript:">近30天</a></span>
        <span class="label m-r-1 white text-dark setDate" data-val="5"><a href="javascript:">自定义</a></span>
    </div>

    <!--
    <div class="col-sm-12 m-t-1">
        颜色说明：
        <span class="label primary m-r-1"><a href="#">正常毛利</a></span>
        <span class="label m-r-1 accent "><a href="#">毛利过低</a></span>
        <span class="label m-r-1 warn"><a href="#">毛利过高</a></span>
        <span class="label m-r-1 info"><a href="#">有留言</a></span>
        <span class="label m-r-1 warning"><a href="#">无SKU</a></span>
        <span class="label m-r-1 danger"><a href="#">缺货</a></span>
        <span class="label m-r-1 success"><a href="#">待打印</a></span>
        <span class="label m-r-1 pink-500"><a href="#">收货信息不全</a></span>
        <span class="label m-r-1 danger"><a href="#">报关信息不全</a></span>
        <span class="label m-r-1 dark"><a href="#">可合并订单</a></span>
    </div>
    -->

</div>

<div class="row p-a" id="filterBox" style="display: none;">
    <div class="col-sm-12">
        平台渠道：
        <span class="label orange m-r-1"><a href="#">全部</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">速卖通</a></span>
        <span class="label m-r-1 white text-dark"><a href="#">eBay</a></span>
    </div>
    <div class="col-sm-12 m-t-1">
        店铺账号：
        <span class="label orange m-r-1 setStore" data-val="0"><a href="javascript:">全部</a></span>
        <span class="label m-r-1 white text-dark setStore" data-val="happydeal store"><a href="javascript:">happydeal store</a></span>
        <span class="label m-r-1 white text-dark setStore" data-val="961781366@qq.com"><a href="javascript:">961781366@qq.com</a></span>
        <span class="label m-r-1 white text-dark setStore" data-val="hai sen store"><a href="javascript:">hai sen store</a></span>
        <span class="label m-r-1 white text-dark setStore" data-val="pughhappylife"><a href="javascript:">pughhappylife</a></span>
    </div>
    <div class="col-sm-12 m-t-1">
        热门国家：
        <span class="label orange m-r-1 setCountry" data-val="0"><a href="javascript:">全部</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="俄罗斯"><a href="javascript:">俄罗斯</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="巴西"><a href="javascript:">巴西</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="西班牙"><a href="javascript:">西班牙</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="美国"><a href="javascript:">美国</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="荷兰"><a href="javascript:">荷兰</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="波兰"><a href="javascript:">波兰</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="法国"><a href="javascript:">法国</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="捷克共和国"><a href="javascript:">捷克共和国</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="加拿大"><a href="javascript:">加拿大</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="智利"><a href="javascript:">智利</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="英国"><a href="javascript:">英国</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="意大利"><a href="javascript:">意大利</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="比利时"><a href="javascript:">比利时</a></span>
        <span class="label m-r-1 white text-dark setCountry" data-val="以色列"><a href="javascript:">以色列</a></span>
    </div>
</div>


<div class="row p-a">
    <div class="col-sm-6">
        <select class="custom-select w-sm inline v-middle">
            <option value="0">选择物流</option>
            <option value="1">申请运单号</option>
            <option value="2">合并订单</option>
            <option value="3">虚拟发货</option>
            <option value="4">搁置订单</option>
            <option value="5">添加备注</option>
            <option value="6">导出Excel</option>
        </select>
        <button class="btn btn-sm dark text-white">批量操作</button>
        <button class="btn btn-sm dark text-white"><i class="fa fa-refresh"></i> 同步订单</button>
    </div>
    <form name="searchFrom" action="" id="searchFrom">
    <div class="col-sm-6">
        <div class="input-group">



                <input type="hidden" id="searchType" value="1"/>
            <div class="input-group-btn dropdown"><button type="button" class="btn white dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span id="searchTypeText">---</span> <span class="caret"></span></button><div class="dropdown-menu"><a class="dropdown-item" href="javascript:" onclick="setSearchType('1','订单号');">订单号</a> <a class="dropdown-item" href="javascript:" onclick="setSearchType('2','包裹号');">包裹号</a><div class="divider"></div><a class="dropdown-item" href="javascript:" onclick="setSearchType('3','跟踪号');">跟踪号</a> <a class="dropdown-item" href="javascript:" onclick="setSearchType('4','SKU');">SKU</a>  <a class="dropdown-item" href="javascript:" onclick="setSearchType('5','买家账号');">买家账号</a>  <a class="dropdown-item" href="javascript:" onclick="setSearchType('6','收件人');">收件人</a> </div></div>
            <input type="text" class="form-control" name="keyword" id="keyword" placeholder="搜索">
                <span class="input-group-btn">
                <button class="btn white" type="button" id="btnSearch"><i class="fa fa-search"></i></button>
                <button class="btn white" type="button" data-toggle="tooltip" data-placement="bottom" title="展开/折叠筛选项目" id="filterBtn"><a href="#" class="" data-ui-toggle-class=""><i class="fa fa-angle-double-up text-danger none"></i><i class="fa fa-angle-double-down inline"></i></a></button>
                </span>

        </div>
    </div>
    </form>


            <input type="hidden" name="filterStore" id="filterStore" value="0"/>
            <input type="hidden" name="pageSize" id="pageSize" value="{{ pageSize }}"/>
            <input type="hidden" name="pageNo" id="pageNo" value="1"/>
            <input type="hidden" name="filterCountry" id="filterCountry" value="0"/>
            <input type="hidden" name="filterStartDate" id="filterStartDate" value="{{ startDate }}"/>
            <input type="hidden" name="filterEndDate" id="filterEndDate" value="{{ endDate }}"/>

</div>



<div class="table-responsive">
    <table class="table table-striped table-hover b-t">
        <thead>
        <tr>
            <th style="width:20px"><label class="md-check m-a-0">
                <input type="checkbox">
                <i class="green"></i></label></th>
            <th>订单编号</th>
            <th>订单金额</th>
            <th>利润</th>
            <th>国家</th>
            <th>时间</th>
            <th>物流方式</th>
            <th>状态</th>
            <th>店铺</th>
            <th style="width:160px">操作</th>
        </tr>
        </thead>
        <tbody id="OrderListBox">
        <tr>
            <td><label class="ui-check m-a-0">
                <input type="checkbox" name="post[]">
                <i class="dark-white"></i></label></td>
            <td>72616353314056</td>
            <td>$66.90</td>
            <td>￥372.174</td>
            <td>澳大利亚</td>
            <td>09/19/2016 20:52:30</td>
            <td>DHL</td>
            <td>已发货</td>
            <td>961781366@qq.com</td>
            <td class="text-right">
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="打印面单"><i class="fa fa-print"></i></button>
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="备注订单"><i class="fa fa-flag" data-toggle="modal" data-target="#modal-memo"></i></button>
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="查看订单详情"><i class="fa fa-eye"></i></button>
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="搁置订单"><i class="fa fa-remove"></i></button>
            </td>
        </tr>
        <tr>
            <td><label class="ui-check m-a-0">
                <input type="checkbox" name="post[]">
                <i class="dark-white"></i></label></td>
            <td>77571593218147</td>
            <td>$97.69</td>
            <td>￥481.077</td>
            <td>智利</td>
            <td>09/19/2016 21:07:06</td>
            <td>未选择物流</td>
            <td>已审核</td>
            <td>961781366@qq.com</td>
            <td class="text-right">
                <!--<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="打印面单"><i class="fa fa-print"></i></button>-->
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="申请运单号"><i class="fa fa-cloud-upload"></i></button>
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="备注订单"><i class="fa fa-flag" data-toggle="modal" data-target="#modal-memo"></i></button>
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="查看订单详情"><i class="fa fa-eye"></i></button>
                <button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="搁置订单"><i class="fa fa-remove"></i></button>
            </td>
        </tr>
        </tbody>
    </table>
</div>


    <div id="modal-memo" class="modal black-overlay" data-backdrop="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">备注订单 <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

                </div>
                    <div class="modal-body text-center p-lg m-l-1 m-r-3">
                        <form role="form">

                            <div class="form-group row">
                                <label for="memoType" class="col-sm-2 form-control-label">类型：</label>
                                <div class="col-sm-10">
                                    <select class="form-control c-select" name="memoType" id="memoType">
                                        <option value="1">拣货说明</option>
                                        <option value="2">客服备注</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="memoContent" class="col-sm-2 form-control-label">内容：</label>
                                <div class="col-sm-10">
                                    <textarea id="memoContent" name="memoContent" class="form-control" rows="4"></textarea>
                                </div>
                            </div>
                            <div class="form-group row m-t-md">
                                <div class="col-sm-offset-2 col-sm-12">
                                    <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn dark p-x-md" data-dismiss="modal">提交</button>
                                </div>
                            </div>
                        </form>
                    </div>

            </div>
        </div>
    </div>


<footer class="light lt p-a navbar-fixed-bottom">
    <div class="row">
        <div class="col-sm-2 text-left"><small class="text-muted inline m-t-sm m-b-sm" id="pageTxt">showing 20-30 of 50 items</small></div>
        <div class="col-sm-5 text-right text-center-xs">
            <ul class="pagination m-a-0">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                <li class="active"><a href="javascript:">1</a></li>
                <li><a href="javascript:">2</a></li>
                <li><a href="javascript:">3</a></li>
                <li><a href="javascript:">4</a></li>
                <li><a href="javascript:">...</a></li>
                <li><a href="javascript:">39</a></li>
                <li><a href="javascript:">40</a></li>
                <li><a href="javascript:">41</a></li>
                <li><a href="javascript:">42</a></li>
                <li><a href="javascript:"><i class="fa fa-chevron-right"></i></a></li>
            </ul>
        </div>
        <div class="col-sm-5 hidden-xs text-right">
            <button class="btn white">转到</button>
            <input type="text" name="jumpTo" id="jumpTo" class="w-xxs" style="margin-right: 3px; height: 30px;"><button class="btn white" id="btnJump">Go</button>
            <button class="btn white">每页</button>
            <select class="custom-select w-xs inline v-middle" name="selectPageSize" id="selectPageSize">
                <option value="30" {% ifequal pageSize '30' %}selected{% endifequal %}>30条</option>
                <option value="50" {% ifequal pageSize '50' %}selected{% endifequal %}>50条</option>
                <option value="100" {% ifequal pageSize '100' %}selected{% endifequal %}>100条</option>
                <option value="200" {% ifequal pageSize '200' %}selected{% endifequal %}>200条</option>
            </select>

        </div>
    </div>
</footer>
</div>
</div>


</div>
</div>




<div id="modal-OrderDetail" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">订单详情</h5>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <p>订单</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                        <button type="button" class="btn dark p-x-md" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="modal-printMB" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">打印面单</h5>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <p>生成打印面单成功，标记为已打印？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                        <button type="button" class="btn dark p-x-md" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="modal-DiyDate" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">自定义日期</h5>
                    </div>
                    <div class="modal-body text-center p-lg">

                        从：

                        <div class="form-group">
                    <div class="input-group date" data-ui-jp="datetimepicker" data-ui-options="{
                format: 'YYYY-MM-DD',
                icons: {
                  time: 'fa fa-clock-o',
                  date: 'fa fa-calendar',
                  up: 'fa fa-chevron-up',
                  down: 'fa fa-chevron-down',
                  previous: 'fa fa-chevron-left',
                  next: 'fa fa-chevron-right',
                  today: 'fa fa-screenshot',
                  clear: 'fa fa-trash',
                  close: 'fa fa-remove'
                }
              }">
                        <input type="text" id="startDate" name="startDate" class="form-control">
                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span></div>
                </div>

                        到：

                        <div class="form-group">
                    <div class="input-group date" data-ui-jp="datetimepicker" data-ui-options="{
                format: 'YYYY-MM-DD',
                icons: {
                  time: 'fa fa-clock-o',
                  date: 'fa fa-calendar',
                  up: 'fa fa-chevron-up',
                  down: 'fa fa-chevron-down',
                  previous: 'fa fa-chevron-left',
                  next: 'fa fa-chevron-right',
                  today: 'fa fa-screenshot',
                  clear: 'fa fa-trash',
                  close: 'fa fa-remove'
                }
              }">
                        <input type="text" id="endDate" name="endDate" class="form-control">
                        <span class="input-group-addon"><span class="fa fa-calendar"></span></span></div>
                </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                        <button type="button" class="btn dark p-x-md" data-dismiss="modal" id="btnDiyDate">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="modal-gezhi" class="modal" data-backdrop="true">
    <div class="row-col h-v">
        <div class="row-cell v-m">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">搁置订单</h5>
                    </div>
                    <div class="modal-body text-center p-lg">
                        <p>您确定要搁置此订单？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn dark-white p-x-md" data-dismiss="modal">取消</button>
                        <button type="button" class="btn dark p-x-md" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="switcher">
    <div class="switcher dark-white" id="sw-theme"><a href="#" data-ui-toggle-class="active" data-ui-target="#sw-theme" class="dark-white sw-btn"><i class="fa fa-gear text-muted"></i></a>
        <div class="box-header"><a href="{% url 'erp:buy' %}" class="btn btn-xs rounded danger pull-right">BUY</a> <strong>主题设置</strong></div>
        <div class="box-divider"></div>
        <div class="box-body">
            <p id="settingLayout" class="hidden-md-down">
                <label class="md-check m-y-xs" data-target="folded">
                    <input type="checkbox">
                    <i></i> <span>折叠</span></label><br/>
                <label class="m-y-xs pointer" data-ui-fullscreen data-target="fullscreen"><span class="fa fa-expand fa-fw m-r-xs"></span> <span>全屏</span></label>
            </p>
            <p>Colors:</p>
            <p data-target="color">
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="primary">
                    <i class="primary"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="accent">
                    <i class="accent"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="warn">
                    <i class="warn"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="success">
                    <i class="success"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="info">
                    <i class="info"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="warning">
                    <i class="warning"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
                    <input type="radio" name="color" value="danger">
                    <i class="danger"></i></label>
            </p>
            <p>Themes:</p>
            <div data-target="bg" class="clearfix">
                <label class="radio radio-inline m-a-0 ui-check ui-check-lg">
                    <input type="radio" name="theme" value="">
                    <i class="light"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-lg">
                    <input type="radio" name="theme" value="grey">
                    <i class="grey"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-lg">
                    <input type="radio" name="theme" value="dark">
                    <i class="dark"></i></label>
                <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-lg">
                    <input type="radio" name="theme" value="black">
                    <i class="black"></i></label>
            </div>
        </div>
    </div>
</div>
</div>
<script src="{% static '' %}aside/scripts/app.min.js"></script>
<style>
    #order-color .p-y-md{padding-bottom:0;padding-top: 0;text-align: center;font-size: 0.625rem; color:#fff;}
</style>
<script>

    function loadOrderList(){


        var parmas = '';

        var store = $('#filterStore').val();
        var country = $('#filterCountry').val();

        var startDate = $('#filterStartDate').val();
        var endDate = $('#filterEndDate').val();

        var pageSize = $('#pageSize').val();
        var pageNo = $('#pageNo').val();


        parmas +='?store='+store;
        parmas +='&country='+country;
        parmas +='&startDate='+startDate;
        parmas +='&endDate='+endDate;
        parmas +='&pageSize='+pageSize;
        parmas +='&pageNo='+pageNo;



        $.getJSON("{% url 'erp:getOrderList' %}"+parmas,function(data){
            var result = data["OrderList"];
            //console.log(result.length);
            if(result.length>0){
                $('#OrderListBox').html('');
                $.each(result,function(idx,order){
                    var line = '';
                    line += '<tr class="order-item" data-val="'+order["ORDERID"]+'" onclick="showOrder('+order["ORDERID"]+')">';
                    line += '<td><label class="md-check m-a-0"><input type="checkbox" name="post[]" id="ck-'+order["ORDERID"]+'"><i class="green"></i></label></td>';
                    line += '<td>'+order["ORDERID"]+'</td>';
                    line += '<td>$'+order["ORDERPRICE"]+'</td>';
                    line += '<td>￥'+order["PROFIT"]+'</td>';
                    line += '<td>'+order["COUNTRY"]+'</td>';
                    line += '<td>'+order["ORDERTIME"]+'</td>';
                    line += '<td>'+order["EXPRESS_COMPANY"]+'</td>';
                    line += '<td>已发货</td>';
                    line += '<td>'+order["STOREID"]+'</td>';
                    line += '<td class="text-right"><button class="btn btn-sm btn-icon white printMb" data-toggle="tooltip" data-placement="bottom" title="打印面单" onclick="printMb('+order["ORDERID"]+')"><i class="fa fa-print"></i></button>';
                    line += '<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="备注订单"><i class="fa fa-flag" data-toggle="modal" data-target="#modal-memo"></i></button>';
                    line += '<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="查看订单详情"><i class="fa fa-eye" data-toggle="modal" data-target="#modal-OrderDetail"></i></button>';
                    line += '<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="搁置订单"><i class="fa fa-remove" data-toggle="modal" data-target="#modal-gezhi"></i></button></td>';

                    line +='</tr>';
                    $('#OrderListBox').append(line);


                });
                $('#pageTxt').html(data["PageTxt"]);
            }else{
                alert('没有数据');
                return false
            }



    });
    }

    loadOrderList();

    $('#showGoodsInfoBox').click(function(){
        $('#goodsInfoBox').toggle();
    });

    $('#closeGoodsInfoBox').click(function(){
        $('#goodsInfoBox').toggle();
    });


    $('#filterBtn').click(function(){
        $('#filterBox').toggle();
    });

    function setSearchType(st,stt){
        $('#searchType').val(st);
        $('#searchTypeText').html(stt);
    }

    function showOrder(orderId){
        var obj = $('#ck-'+orderId);
        var obj2 = $('input[name="post[]:checked"');
        //console.log(obj);
        console.log(obj2.length);
        $('#goodsInfoBox').css("display","block");


    }



    function printMb(orderid){
        //href="/static/aside/printMb.pdf"

        window.open('/static/aside/printMb.pdf');
        //alert('标记［'+orderid+'］已打印!');
        $('#modal-printMB').modal('show');
    }



    $('.setStore').click(function(){
        $('.setStore').removeClass('orange');
        $(this).addClass('orange');
        $('#filterStore').val($(this).attr('data-val'));
        $('#pageNo').val('1');
        loadOrderList();
    });


    $('.setCountry').click(function(){
        $('.setCountry').removeClass('orange');
        $(this).addClass('orange');
        $('#filterCountry').val($(this).attr('data-val'));
        $('#pageNo').val('1');
        loadOrderList();
    });



    $('.setDate').click(function(){
        $('.setDate').removeClass('orange');
        $(this).addClass('orange');
        //alert($(this).attr('data-val'));
        var dt = $(this).attr('data-val');
        $('#pageNo').val('1');

        switch(dt){
            case '5':
                $('#modal-DiyDate').modal('show');
                break;
            case '4':
                $('#filterStartDate').val(getFormatDate(29));
                //console.log($('#filterStartDate').val());
                //console.log($('#filterEndDate').val());
                loadOrderList();
                break;
            case '3':
                $('#filterStartDate').val(getFormatDate(6));
                //console.log($('#filterStartDate').val());
                //console.log($('#filterEndDate').val());
                loadOrderList();
                break;
            case '2':
                $('#filterStartDate').val(getFormatDate(1));
                $('#filterEndDate').val(getFormatDate(1));
                //console.log($('#filterStartDate').val());
                //console.log($('#filterEndDate').val());
                loadOrderList();
                break;
            case '1':
                $('#filterStartDate').val(getFormatDate(0));
                //console.log($('#filterStartDate').val());
                //console.log($('#filterEndDate').val());
                loadOrderList();
                break;
            case '0':
                $('#filterStartDate').val(getFormatDate(90));
                //console.log($('#filterStartDate').val());
                loadOrderList();
                break;
            default :
                //日期错误,返回7天
                $('#filterStartDate').val(getFormatDate(6));
                //console.log($('#filterStartDate').val());
                loadOrderList();

        }


    });


    $('#btnDiyDate').click(function(){
        $('#filterStartDate').val($('#startDate').val());
        $('#filterEndDate').val($('#endDate').val());

        //console.log($('#filterStartDate').val());
        //console.log($('#filterEndDate').val());

        loadOrderList();

    });



    //简单格式化时间
    function formatDate(dt){
        dt = dt.split(' ')[0];
        dt = dt.replace('/','-');
        dt = dt.replace('/','-');
        return dt
    }

    //生成日期
    function getFormatDate(num){
        var d = new Date();
        var nowtime = new Date(d.getFullYear(), d.getMonth(),(d.getDate()-num));
        return formatDate(nowtime.toLocaleDateString())
    }
    //end

    //每页显示条数
    $('#selectPageSize').change(function(){
        var pagesize = $(this).children('option:selected').val();
        $('#pageSize').val(pagesize);
        loadOrderList()
    });


    $('#btnSearch').click(function(){
        var keyword = $('#keyword').val();
        var searchType = $('#searchType').val();
        if(keyword.length<=0){
             alert('请填写搜索关键词');
             $('#keyword').focus();
             return false;
         }else{


            $('#OrderListBox').html('');

            var parmas = '';
            parmas +='?searchType='+searchType;
            parmas +='&keyword='+keyword;

            $.getJSON("{% url 'erp:getOrderList' %}"+parmas,function(data){
            var result = data["OrderList"];
            $.each(result,function(idx,order){
                var line = '';
                line += '<tr class="order-item" data-val="'+order["ORDERID"]+'" onclick="showOrder('+order["ORDERID"]+')">';
                line += '<td><label class="md-check m-a-0"><input type="checkbox" name="post[]" id="ck-'+order["ORDERID"]+'"><i class="green"></i></label></td>';
                line += '<td>'+order["ORDERID"]+'</td>';
                line += '<td>$'+order["ORDERPRICE"]+'</td>';
                line += '<td>￥'+order["PROFIT"]+'</td>';
                line += '<td>'+order["COUNTRY"]+'</td>';
                line += '<td>'+order["ORDERTIME"]+'</td>';
                line += '<td>'+order["EXPRESS_COMPANY"]+'</td>';
                line += '<td>已发货</td>';
                line += '<td>'+order["STOREID"]+'</td>';
                line += '<td class="text-right"><button class="btn btn-sm btn-icon white printMb" data-toggle="tooltip" data-placement="bottom" title="打印面单" onclick="printMb('+order["ORDERID"]+')"><i class="fa fa-print"></i></button>';
                line += '<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="备注订单"><i class="fa fa-flag" data-toggle="modal" data-target="#modal-memo"></i></button>';
                line += '<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="查看订单详情"><i class="fa fa-eye"></i></button>';
                line += '<button class="btn btn-sm btn-icon white" data-toggle="tooltip" data-placement="bottom" title="搁置订单"><i class="fa fa-remove" data-toggle="modal" data-target="#modal-gezhi"></i></button></td>';

                line +='</tr>';
                $('#OrderListBox').append(line);

            });

        });
        }
    });

    $('#btnJump').click(function(){
        var page = $('#jumpTo').val();
        if(page.length<=0){
            alert('请填写页码');
             $('#jumpTo').focus();
             return false;
        }else{
            var re = /^[0-9]+.?[0-9]*$/;
            if (!re.test(page)){
                alert("请输入数字");
                return false;
            }else{
                $('#pageNo').val(page);
                loadOrderList();
            }

        }
    });

</script>
</body>
</html>